@charset'UTF-8';
 /**
 * 圣诞国家馆
 * @Author zzz
 * @email zhangzongzheng@ymatou.com
 * @Date 2015/12/16
 */
 @import'../_components/variables.scss';
 @import'../_components/_mixin.scss';
 @import'../_components/reset.scss';

 @import'../_components/column.scss';

 @import'../assets/ymtUI.scss';
 @import'../assets/ymt_components.scss';

 @import'../assets/common.scss';


@import'../black_five/_proList.scss';
@import'../assets/_global_good.scss';

 // $imgPath:'/images/christmas/country/';
 $imgPath:'http://staticontent.ymatou.com/images/activity/christmas/country/';

 @include productList(#9b121b,#fff);

.evt-container{
    background:#9b121b;
}

.evt-banner{
    height:$rem*457;
    background-image:url(#{$imgPath}banner.jpg);
    @extend .bg__full;
}

.evt-christmas-gift{
    height:$rem*190;
    background-image:url(#{$imgPath}christmas_gift.jpg);
    position: relative;
    @extend .bg__full;

    .get-gift {
        width: $rem*180;
        height: $rem*56;
        position: absolute;
        bottom: $rem*16;
        right: $rem*112;
    }
}

//重置全球热卖标题样式
@mixin resetHotStyle($color){
    .hot-wrapper{
        .hot-hd{
            .title{
                color:$color !important;
                &:before{
                    border-left-color:  $color !important;
                }
                &:after{
                    border-right-color:  $color !important;
                }
            }
        }
    }
}

.chr-pro{
    padding-top:$rem*5;
    &-red {
        background-color: #9b121b;
        @include resetHotStyle(#9b121b);
    }
    &-blue{
        background:#0072ff;
        @include resetHotStyle(#0072ff);
    }
    &-yellow{
        background:#ffb400;
        @include resetHotStyle(#ffb400);
    }
    &-green{
        background:#2b9b3a;
        @include resetHotStyle(#2b9b3a);
    }

    .evt-area-hd{
        height:$rem*131;
        @extend .bg__full;
    }
    .evt-area-bd{
        padding: 0 $rem*10 0;
    }
    .evt-area-ft{
        padding:0 $rem*10 $rem*10;
    }

    /* //查看更多
    .see-more{
        width:100%;
        border:2px solid #fff;
        border-radius:$rem*6;
        text-align:center;
        color:#fff;
        font-size:$rem*34;
        height:$rem*70;
        line-height:$rem*70;
        //横线
        i{
            width:$rem*40;
            height:$rem*4;
            background:#fff;
            display:inline-block;
            vertical-align: middle;

        }
        span{
            margin:0 $rem*25;
        }
    } */

    .hot-wrapper{
        .hot-hd{
            padding:$rem*20 0;
            margin-bottom:$rem*20;
            $color:#ef3b3b;
            .inner{
                width:100%;
                border-bottom:1px solid #fff;
                height:$rem*25;
            }
            .title{
                height:$rem*50;
                line-height:$rem*50;
                width:$rem*330;
                background:#fff;
                color:$color;
                font-size:$rem*35;
                text-align:center;
                font-weight:bold;
                margin:0 auto;
                &:before,
                &:after{
                    content:'';
                    border:$rem*25 solid rgba(0,0,0,0);
                    display: inline-block;
                }
                &:before{
                    border-left-color:  $color;
                    float:left;
                    margin-left: -1px;
                }
                &:after{
                    border-right-color:  $color;
                    float:right;
                    margin-right: -1px;
                }
            }
        }
    }
}



@for $i from 1 to 5 {
    .chr-pro-0#{$i}{
        .evt-area-hd{
            background-image:url(#{$imgPath}/title0#{$i}.jpg);
        }
    }
}

//全球买手
.seller-seeding{
    padding-bottom: $rem*18;
    background:#9b121b;
    @include clearfix();
    .seller-title{
        height: $rem*122;
        width: 100%;
        @extend .bg__full;
    }
    .seller-area{
        float:left;
        width:25%;
        height:$rem*250;
        @extend .bg__full;
    }
}

.tab{
    height:$rem*155;
    nav{
        transition: transform 0.25s ease-in-out;
        will-change:transform;
        // transform: translate(0, 100%);
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        height:$rem*155;
        @extend .bg__full;
        padding:$rem*56 $rem*25 $rem*36;
        background-image:url(#{$imgPath}tab_bg.jpg);
        // background-position: bottom;
        &.show{
            transform: translate(0, 0);
        }
        ul{
            width: 100%;
            height: 100%;
            @include clearfix();
        }
        li{
            float:left;
            width:20%;
            height: $rem*63;
            padding-right: $rem*25;
            text-align:center;
            color:#fff;
            font-size:$rem*36;
            font-weight:bold;
            position: relative;
            z-index: 9;
            &.active{
                &>span{
                    display: block;
                }
            }
            &:last-child {
                padding-right: 0;
            }
        }
        .slide-block {
            width: $rem*120;
            height: $rem*143;
            position: absolute;
            top: -$rem*24;
            left: $rem*25;
            transition: all 0.25s ease-in-out;
            .santa-claus {
                display: block;
                height: $rem*80;
                background-image: url(#{$imgPath}santa_claus.png);
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                animation: santa-animation 1s linear 0s infinite alternate;
            }
            .block {
                display: block;
                height: $rem*63;
                background-color: #900e0e;
                z-index: 0;
            }
        }
    }
}

@keyframes santa-animation {
    0% {
        transform: rotate(-5deg);
        transform-origin: 5% 80%;
    }

    100% {
        transform: rotate(-15deg);
        transform-origin: 30% 80%;
    }
}

.ymt-butler{
    bottom:$rem*300;
}

.module-hold{
    background-image:url(http://staticontent.ymatou.com/images/activity/christmas/christmas-loading.gif);
}

.ios-bartools{
    height:$rem*150;
    &-wrapper{
        background: rgba(255, 255, 255, 0.92);
        height:$rem*150;
        z-index:9999;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        border-bottom:$rem*2 solid rgba(0,0,0,.5);
        padding-top:$rem*70;
        h2{
            font-size:$rem*38;
            text-align:center;
            color:#333;
            font-weight:bold;
        }
    }
}
.pro-wrapper{
    background: #fff;
    padding-bottom:$rem*18;
    margin-bottom:$rem*8;
    border-radius:$rem*10;
    overflow:hidden;
   .price-wrapper{
       box-sizing: content-box;
       width:100%;
       height:$rem*60;
       line-height:$rem*60;
       border:$rem*6 solid #f0dade;
       border-radius: $rem*10;
       margin-top:$rem*10;
       background-color: #fff;
       &>span{
           display:inline-block;
           height:100%;
           text-align:center;
           float:left;
       }
       &>:first-child{
           background-color:#fff;
           color:#cf2541;
           width:40%;
           font-size: $rem*24;
           font-weight:bold;
           border-radius: 0;
           border-top-left-radius: $rem*6;
           border-bottom-left-radius: $rem*6;
       }
       &>:last-child{
           background-color:#cf2541;
           color:#fff;
           border-top-right-radius: $rem*6;
           border-bottom-right-radius: $rem*6;
           width:60%;
           &>strong{
               font-size:$rem*40;
               font-weight:bold;
           }
       }
   }

 }
